<template>
  <div class="student">
    <h3>学生名称：{{ name }}-{{ demoName }}</h3>
    <h3>性别：{{ sex }}</h3>
    <button @click="sendStudentName">学生发送</button>
    <button @click="sendStudentNameRef">学生发送Ref</button>
    <button @click="unbindSgg">解绑sgg事件</button>
    <button @click="deathMy">销毁自己</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: "zhangsan",
      sex: "女",
    };
  },
  methods: {
    sendStudentName() {
      this.$emit("sgg", this.name, "a", "b", 666);
    },
    sendStudentNameRef() {
      this.$emit("refsgg", this.name, "ref-a", "ref-b", 888);
    },
    unbindSgg() {
      //不传参代表解绑所有事件
      //   this.$off("sgg");
      this.$off(["sgg"]); //解绑多个
      console.log("解绑sgg事件");
    },
    deathMy() {
      this.$destroy();
      console.log("销毁自己vc，所有自定义事件失效");//vm如果死了。vc也死了。这也失效
    },
  },
  props: ["demoName"],
};
</script>
// scoped 作用域样式，只作用于当前组件
<style scoped lang="css">
.student {
  background-color: orange;
  padding: 5px;
  margin: 5px;
}
</style>